<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { RiSettingsLine, RiSunLine, RiMoonLine, RiGithubLine } from '@remixicon/vue';
import { ModelSelect, SearchEngineSelect, LocalModelSelect, LanguageSelect } from './components/index';
import { useAppStore } from './store';
import { useI18n } from 'vue-i18n';
import { type SwitchValue } from 'tdesign-vue-next';

const { t, locale } = useI18n();
const appStore = useAppStore();

const showSettings = ref(false);

const onChangeTheme = (val: SwitchValue) => {
  if (val) appStore.updateTheme('dark');
  else appStore.updateTheme('light');
};

const onEnableLocalModel = (val: SwitchValue) => {
  appStore.switchLocalModel(val as boolean);
};

onMounted(() => {
  locale.value = appStore.language;
  document.title = t('title');
  if (appStore.theme) appStore.updateTheme(appStore.theme);
  else {
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('theme-mode', 'dark');
      appStore.updateTheme('dark');
    } else {
      document.documentElement.removeAttribute('theme-mode');
      appStore.updateTheme('light');
    }
  }
});
</script>

<template>
  <div class="size-full sm:w-full md:max-w-2xl lg:max-w-3xl dark:bg-black">
    <div class="fixed bottom-1/3 right-4 z-50 flex flex-col items-center justify-center gap-4">
      <div class="flex w-9 justify-center gap-2 rounded-xl bg-gray-200 p-1 shadow-lg dark:bg-gray-600">
        <t-button href="https://github.com/yokingma/search_with_ai" target="_blank" shape="circle" theme="default">
          <template #icon> <RiGithubLine /></template>
        </t-button>
      </div>
      <div class="flex w-9 justify-center gap-2 rounded-xl bg-gray-200 p-1 shadow-lg dark:bg-gray-600">
        <t-button shape="circle" theme="default" @click="showSettings = true">
          <template #icon> <RiSettingsLine /></template>
        </t-button>
      </div>
    </div>
    <!-- eslint-disable-next-line vue/no-v-model-argument -->
    <t-drawer v-model:visible="showSettings" :footer="false" :header="t('settings')">
      <div class="flex h-full flex-col justify-between gap-4">
        <div class="w-full">
          <div class="flex w-full flex-col gap-2">
            <div class="">{{ t('selectModel') }}</div>
            <ModelSelect />
          </div>
          <div class="mt-2 flex w-full flex-col gap-2">
            <div class="">{{ t('selectEngine') }}</div>
            <SearchEngineSelect />
          </div>
          <t-divider>{{ t('localModel') }}</t-divider>
          <div class="mt-2 flex w-full flex-col gap-2">
            <div class="">{{ t('enableLocalModel') }}</div>
            <t-switch class="w-12" size="large" :default-value="appStore.enableLocal" @change="onEnableLocalModel">
              <template #label="slotProps">
                <template v-if="slotProps.value">
                  on
                </template>
                <template v-else>
                  off
                </template>
              </template>
            </t-switch>
          </div>
          <div class="mt-2 flex w-full flex-col gap-2">
            <div class="">{{ t('localModel') }}</div>
            <LocalModelSelect />
          </div>
          <t-divider>{{ t('language') }}</t-divider>
          <div class="mt-2 flex w-full flex-col gap-2">
            <LanguageSelect />
          </div>
        </div>
        <div class="mb-4 flex flex-row gap-2">
          <span>{{ t('theme') }}: </span>
          <t-switch class="w-12" size="large" :default-value="appStore.theme === 'dark'" @change="onChangeTheme">
            <template #label="slotProps">
              <template v-if="slotProps.value">
                <RiMoonLine size="14" />
              </template>
              <template v-else>
                <RiSunLine size="14" />
              </template>
            </template>
          </t-switch>
        </div>
      </div>
    </t-drawer>
    <router-view />
  </div>
</template>
